<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>常见标签</title>

<style >

h1 {
 color: blue;
}

/*
a标签添加伪类 , 伪类:给元素添加特殊的效果

link: 未访问过连接初始状态
visited: 访问过链接的状态
hover :鼠标 移入/悬停 状态
active:鼠标按下时候的状态

a标签伪类需要按照严格顺序设置 : L V H A, 不然会冲突无效
伪类是在css基础上覆盖添加的效果,会重写元素style属性, 如 color

*/

a:link{ color:black; }
a:visited{ color:pink; }
a:hover{ color:green; }
a:active {color: purple;};

/*设置了a的属性,span标签才会有效区分*/
a {
 color: blue;
}


/*---------*/
span {
color: red;
}

</style>

  </head>

  <body>

<!-- 超链接 -->
<h1>常见标签</h1>
<a href="http://www.w3cschool.cn/html5/" >w3c school</a>
<br><br>

<a href="http://www.baidu4.com" > <span>百度</span> - 一个搜索引擎</a>
<br><br>

<!-- 页眉 -->
<header>
   header语意是页面头部,或模块的头部
</header> <br>

<!-- 导航 -->
<nav>
  nav 导航栏,包含可点击的一些按钮
</nav> <br>

<!-- section -->
<section>
  section 页面上的版块,划分页面版块
</section> <br>


<!-- article -->
<article >
  article 文章, 帖子
</article> <br>




<!-- aside -->
<aside class="">
  aside 一般用于侧栏, 显示广告,导航组等

</aside> <br>


<!--  time-->
<time> time 用于显示时间</time>


<p>p代表文章段落</p>


<strong>strong代表强调的意思</strong> <br>
<em>em也是强调,但是斜体,不加粗</em> <br>

<hr>
<p>ul是无序列表, ol是有序列表 ,两者一般下面只放li标签</p>
<ul>
  <li>无序列表</li>
  <li>无序列表</li>
</ul>



<ol>
  <li>ol是有序列表</li>
  <li>ol是有序列表</li>
</ol>

<br>

<p>dl是自定义列表, dt是标题(只能有一个,w3c标准), dd是列表信息</p>
<dl>
  <dt>新闻</dt>
  <dd>XXX事件</dd>
  <dd>XXXXXXX事件</dd>
</dl>

<br>

<hr>
<mark>mark是高亮标签,起强调效果</mark>

<hr>
<img src="img/dg_smaill.jpg" alt="图片没出来">



  </body>
</html>
